<route lang="json5">
{
	style: {
		navigationStyle: 'custom',
	},
}
</route>
<template>
	<view class="page">
		<view class="mask" v-if="previewSrc" @click="previewSrc = ''">
			<image :src="previewSrc" mode="widthFix" @click.top="() => {}" />
		</view>

		<view class="user">
			<wd-img
				v-if="userStore.userInfo && userStore.userInfo.avatar"
				:src="userStore.userInfo.avatar"
				:width="50"
				:height="50"
			></wd-img>
			<div class="column" v-if="userStore.userInfo && userStore.userInfo.nickname">
				<text>{{ userStore.userInfo.nickname }}</text>
				<text>ID:{{ userStore.userInfo.id }}</text>
			</div>
		</view>

		<view class="desc">
			<view class="item" @click="toUrl('/pages/mine/changePassword')">
				<wd-img
					src="https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/desc2.png"
					:width="50"
					:height="50"
				></wd-img>
				<text>{{ appTxtStore?.appTxt?.my_index2.username }}</text>
			</view>

			<view class="item" @click="toUrl('/pages/share/index')">
				<wd-img
					src="https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/desc1.png"
					:width="50"
					:height="50"
				></wd-img>
				<text>{{ appTxtStore?.appTxt?.my_index2.yaoqing }}</text>
			</view>

			<view class="item" @click="toUrl('/pages/code/index')">
				<wd-img
					src="https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/desc1.png"
					:width="50"
					:height="50"
				></wd-img>
				<text>{{ appTxtStore?.appTxt?.my_index2.payment_code }}</text>
			</view>

			<view class="item" @click="exitLogin">
				<wd-img
					src="https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/login_out.png"
					:width="50"
					:height="50"
				></wd-img>
				<text>{{ appTxtStore?.appTxt?.my_index2.login_out }}</text>
			</view>
		</view>

		<view class="radio">
			<wd-radio-group v-model="queryParams.type" shape="button" @change="handleChangeType">
				<wd-radio :value="0">{{ appTxtStore?.appTxt?.my_index?.all?.name }}</wd-radio>
				<wd-badge :modelValue="userStore.userInfo?.wait_download_info?.wait_upload_orderimage_total">
					<wd-radio :value="1">
						{{ appTxtStore?.appTxt?.my_index?.wait_order?.name }}
					</wd-radio>
				</wd-badge>
				<wd-badge :modelValue="userStore.userInfo?.wait_download_info?.wait_download_total">
					<wd-radio :value="2">{{ appTxtStore?.appTxt?.my_index?.wait_down.name }}</wd-radio>
				</wd-badge>
				<wd-badge :modelValue="userStore?.userInfo?.wait_download_info?.wait_upload_commentimage_total">
					<wd-radio :value="3">{{ appTxtStore?.appTxt?.my_index?.wait_comment?.name }}</wd-radio>
				</wd-badge>
			</wd-radio-group>
		</view>

		<view
			class="comment-item"
			v-for="comment in list"
			:key="comment.id"
			@click="toUrl('/pages/task/index?id=' + comment.task_id)"
		>
			<view class="content">
				<image
					:src="parseImage(comment)"
					@click.stop="() => (previewSrc = parseImage(comment))"
					mode="scaleToFill"
				/>
				<view class="content-child">
					<text class="line2">{{ comment.task_info.title }}</text>
					<text>
						<text class="jl">{{ appTxtStore?.appTxt?.my_index?.task_reward?.name }}：</text>
						{{ appTxtStore?.appTxt?.unit }}{{ comment.task_info.unit_price }}
					</text>
					<text>
						{{ appTxtStore?.appTxt?.my_index?.create_time.name }}：{{ parseTime(comment.create_time) }}
					</text>
					<image
						v-if="comment.task_info.is_comment == 1 && comment.task_comment.is_comment == 1"
						class="status"
						src="https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/order_finish.png"
					></image>

					<image
						v-if="comment.task_info.is_comment == 1 && comment.task_comment.is_comment == 0"
						class="status"
						src="https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/wait_comment.png"
					></image>
				</view>
			</view>
		</view>

		<wd-status-tip image="content" v-if="list.length == 0" tip="没有更多了" />
	</view>
</template>
<script setup>
import { useBaseStore } from '@/store/base'
import { useUserStore } from '@/store'
import { http } from '@/utils/http'
import { parseTime } from '@/utils/index'
import { useAppTxtStore } from '@/store/appTxt'

defineOptions({
	name: 'Mine',
})

// 预览图片
const previewSrc = ref('')

const baseStore = useBaseStore()
const userStore = useUserStore()

const appTxtStore = useAppTxtStore()

const list = ref([])
const count = ref(0)
const queryParams = reactive({ page: 1, pageSize: 10, type: 0, order_type: 1 })

const parseImage = (comment) => {
	if (comment.cid) {
		return comment.task_comment.image_list[0]
	} else {
		return `https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/default_goods.png`
	}
}

const toUrl = (url) => {
	uni.navigateTo({
		url,
	})
}

onShow(() => {
	userStore.getUserInfo()
	getData()
})

const handleChangeType = (res) => {
	queryParams.type = res.value
	queryParams.page = 1
	getData()
}

const getData = async () => {
	try {
		let res = await http.get('/Usersd/myCommentDataList', queryParams)

		if (res.code == 200) {
			if (queryParams.page == 1) {
				count.value = res.result.count
				list.value = res.result.list
			} else {
				list.value = list.value.concat(res.result.list)
			}
		}
	} finally {
		uni.stopPullDownRefresh()
	}
}

const exitLogin = () => {
	uni.showModal({
		title: '提示',
		content: '是否退出登陆',
		showCancel: true,
		success: ({ confirm, cancel }) => {
			if (confirm) {
				uni.setStorageSync('token', '')
				userStore.userInfo = null
				uni.reLaunch({ url: '/pages/login/index' })
			}
		},
	})
}

onPullDownRefresh(() => {
	queryParams.page = 1
	getData()
})

onReachBottom(() => {
	if (list.value.length < count.value) {
		queryParams.page = queryParams.page + 1
		getData()
	} else {
		uni.showToast({
			title: '没有更多了',
			duration: 2000,
			icon: 'none',
		})
	}
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>
<style lang="scss" scoped>
:deep(.wd-radio-group) {
	background-color: #f2f2f2 !important;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	padding: 12rpx;

	gap: 12rpx;
}

:deep(.wd-radio) {
	margin-right: 0;
}

:deep(.wd-badge) {
	vertical-align: baseline !important;
}

:deep(.wd-badge__content) {
	right: 12rpx !important;
}

.page {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;

	padding: 24rpx;
	padding-top: var(--status-bar-height);
	gap: 24rpx;

	background-image: url('https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/mine_bk.png');
	background-repeat: no-repeat;
	/* #ifdef H5 */
	background-size: 750rpx 260rpx;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	background-size: 750rpx calc(260rpx + var(--status-bar-height));
	/* #endif */

	.mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;

		display: flex;
		justify-content: center;
		align-items: center;

		z-index: 100;
		background-color: rgba($color: #000000, $alpha: 0.85);

		image {
			width: 750rpx;
		}
	}

	.user {
		width: 100%;
		/* #ifdef MP-WEIXIN */
		height: calc(200rpx + var(--status-bar-height));

		/* #endif */
		/* #ifdef H5 */
		height: 200rpx;

		/* #endif */

		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;

		gap: 24rpx;

		.column {
			flex: 1;

			display: flex;
			flex-flow: column nowrap;
			justify-content: space-evenly;

			gap: 12rpx;
			color: #fff;
			font-size: 24rpx;

			text:first-child {
				font-weight: 800;
				font-size: 30rpx;
			}
		}
	}

	.desc {
		width: 750rpx;
		height: 209rpx;
		background: #ffffff;

		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding: 0 45rpx;
		gap: 75rpx;

		.item {
			width: 100rpx;
			height: 130rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			line-height: 30rpx;

			display: flex;
			flex-flow: column nowrap;
			justify-content: flex-start;
			align-items: center;
		}
	}

	.order {
		width: 750rpx;
		min-height: 245rpx;
		background: #ffffff;

		box-sizing: border-box;
		padding: 30rpx 45rpx;

		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;

		gap: 24rpx;

		.name-line {
			width: 100%;
			height: 50rpx;

			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;

			.name {
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;
			}

			.all {
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				line-height: 50rpx;
			}
		}

		.row {
			width: 100%;
			display: grid;
			grid-template-columns: 100rpx 100rpx 100rpx 100rpx;

			justify-content: space-between;
			align-items: center;
			gap: 24rpx;
			box-sizing: border-box;

			.item {
				width: 100rpx;
				height: 90rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				line-height: 30rpx;

				display: flex;
				flex-flow: column nowrap;
				justify-content: space-between;
				align-items: center;
			}
		}
	}

	.radio {
		width: 750rpx;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0 12rpx;

		background-color: #f2f2f2;

		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}
}

.comment-item {
	width: 710rpx;
	background-color: #fff;
	box-sizing: border-box;
	padding: 24rpx;

	.content {
		width: 100%;

		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 24rpx;

		image {
			width: 200rpx;
			height: 200rpx;
		}

		.content-child {
			flex: 1;
			min-height: 200rpx;
			display: flex;
			flex-flow: column nowrap;
			justify-content: space-between;

			position: relative;
			font-size: 28rpx;

			gap: 18rpx;

			.jl {
				color: #666;
				font-size: 24rpx;
				font-weight: normal;
			}

			text {
				line-height: 40rpx;
			}

			text:nth-child(2) {
				flex: 1;
				font-size: 36rpx;
				color: #ff4500;
				font-weight: 800;
			}

			text:nth-child(3) {
				font-size: 24rpx;
				color: #666666;
			}

			.status {
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}
}
</style>
